<template>
  <view class="container">
    <!-- 动态内容 -->
    <view class="content">
      {{ dynamic.content }}
    </view>
    <!-- 动态图片 -->
    <view class="images">
      <image v-for="(image, index) in dynamic.images" :key="index" :src="image" />
    </view>
	
	<view class="comments-data">
		<view class="data">{{time}}</view>
		 <view @click="like" :class="{ 'liked': isLiked }">{{ likeCount }} ..</view>
	</view>
	<view class="input-status">
		<input v-model="comment" placeholder="请输入评论内容"></input>
		  <view @click="addComment">发送</view>
	</view>
	
	
    <!-- 动态评论 -->
    <view class="comments">
      <view class="comment" v-for="comment in comments" :key="comment.id">
        <view class="author">{{ comment.author }}</view>
        <view class="content">{{ comment.content }}</view>
      </view>
    </view>
	
  </view>
</template>
<script>
export default {
  data() {
    return {
      dynamic: {},
	  
	        isLiked: false,
	        likeCount: 0,
	        time: '',
	        comments: [
			],
	        comment: ''
    };
  },
  onLoad(options) {
    // 获取动态详情数据
    this.getDynamicDetail(options.dynamicId);
  },
  
    mounted() {
      this.time = this.formatTime(new Date())
    },
  methods: {
    // 获取动态详情数据
    getDynamicDetail(dynamicId) {
      // 调用接口获取动态详情数据
      // ...
      this.dynamic = {
        content: '这是一条动态内容',
        images: [
          '../../../static/icon/name.jpg',
          '../../../static/icon/nameone.jpg',
        ],
        // comments: [
        //   { author: '小意', content: '这是一条评论内容' },
        //   { author: '小若', content: '这是另一条评论内容' },
        // ],
      };
    },
	
	 like() {
	      if (this.isLiked) {
	        this.likeCount--
	      } else {
	        this.likeCount++
	      }
	      this.isLiked = !this.isLiked
	    },
	    // 添加评论
	    addComment() {
	      if (this.comment.trim()) {
	        const newComment = {
	          id: this.comments.length + 1,
	          content: this.comment,
	          time: this.formatTime(new Date()),
			  author:"小意"
	        }
	        this.comments.push(newComment)
	        this.comment = ''
	      }
	    },
	    // 格式化时间
	    formatTime(time) {
	      const year = time.getFullYear()
	      const month = this.formatNumber(time.getMonth() + 1)
	      const day = this.formatNumber(time.getDate())
	      const hour = this.formatNumber(time.getHours())
	      const minute = this.formatNumber(time.getMinutes())
	      const second = this.formatNumber(time.getSeconds())
	      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	    },
	    // 格式化数字，保证一位数的数字前面加 0
	    formatNumber(n) {
	      n = n.toString()
	      return n[1] ? n : '0' + n
	    }
	
	
	
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20rpx;
  width: 90%;
  margin: 0 auto;
  .content {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    line-height: 1.5;
  }
  
  .images {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
	
	 image {
	  width:200rpx;
	  height: 200rpx;
	  margin-right: 10rpx;
	  margin-bottom: 10rpx;
	}
  }
  .comments-data{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  
  .input-status{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin: 20px 0px;
	  
	  input{
		  width: 80%;
		  border: 1px solid black;
	  }
  }
  
  
  .comments{
  	background-color: white;
	
     .comment {
	  margin-bottom: 10rpx;
	  border-bottom:1px solid black;
	  
         .author {
	    font-size: 26rpx;
	    font-weight: bold;
	  }
	     .content {
	    font-size: 28rpx;
	    line-height: 1.5;
	  }
	}
	
	
  }
  
}








</style>